<template>
  <l-painter
    class="poster-main"
    v-if="!url"
    @progress="progress"
    useCORS
    css="width:660rpx;borderRadius:16rpx;background:#fff;padding:24rpx 0"
    ref="painter"
  >
    <l-painter-image
      :src="props.circleInfos?.backImage"
      css=" width: 136rpx; height: 136rpx;padding-left: 24rpx;"
    />
    <l-painter-view
      css="margin-top: 30rpx; marginRight: 240rpx;padding-left: 20rpx; display: inline-block"
    >
      <l-painter-text
        :text="props.circleInfos?.name"
        css="display: block; padding-bottom: 10rpx; color: #000; font-size: 32rpx; fontWeight: bold"
      />
      <l-painter-text
        :text="`已加入${props.circleInfos?.memberNum}人`"
        css="color: #777777; font-size: 24rpx"
      />
    </l-painter-view>
    <l-painter-view css="margin-top: 40rpx;  display: inline-block">
      <!-- <l-painter-image src="/static/icon/reload.svg" css=" width: 40rpx;  height: 40rpx; " /> -->
      <!-- <l-painter-text
          text="刷新"
          css="color: #777777; font-size: 24rpx;display: block"
        /> -->
    </l-painter-view>
    <l-painter-view
      css=" box-sizing: border-box;margin: 76rpx 0 54rpx 0;width:660rpx;textAlign:center;"
    >
      <l-painter-image
        css="width: 504rpx; height: 504rpx;"
        :src="props.circleInfos.qrCode"
      ></l-painter-image>
    </l-painter-view>
    <l-painter-view css="marginBottom:22rpx;textAlign:center;width:660rpx">
      <l-painter-text css="fontSize:24rpx;" text="丰富人脉资源 期待你的加入" />
    </l-painter-view>
    <l-painter-view css="marginBottom:22rpx;textAlign:center;width:660rpx">
      <l-painter-text
        css="color:#999999"
        text="长按保存图片（长按不行可以截屏）"
      />
    </l-painter-view>
  </l-painter>
  <view v-else>
    <image class="img" :src="url" mode="aspectFill" />
  </view>
  <view
    v-if="loadNumber != 1 && !url"
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
    "
  >
    <van-loading size="24px" vertical color="#2352f3" text-color="#2352f3">{{
      loadText
    }}</van-loading>
  </view>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
// import { toBase64 } from '@/utils/util'

const props = defineProps({
  showPoster: {
    default: true,
    type: Boolean,
  },
  circleInfos: {
    type: Object,
    default: {},
  },
});

const painter = ref(null);
const url = ref("");
onMounted(() => {
  painter.value.canvasToTempFilePathSync({
    fileType: "png",
    // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
    pathType: "base64",
    quality: 1,
    success: (res) => {
      url.value = res.tempFilePath;
    },
  });
});

const loadNumber = ref(0);
const loadText = ref("");
const progress = (number) => {
  loadNumber.value = number;
  loadText.value = "正在绘制海报" + Number(number * 100).toFixed(2) + "%";
  console.log(loadText.value, "load");
};
</script>

<style lang="scss" scoped>
.poster-main {
  // padding: 24rpx;
  background-color: #fff;
}

.img {
  width: 660rpx;
  height: 900rpx;
}

// .user-image {
//   width: 100px !important;
//   height: 100px !important;
// }
</style>
